<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML>
<html style='height:100%;'>
<head>
<base href="<%=basePath%>">

<title>施工人员审批</title>
<link rel="stylesheet" href="css/vivo.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="js/bootstrap2/css/bootstrap.min.css">
<link rel="stylesheet" href="css/common.css">
<link href="js/select2/select2.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css"
	href="static/p_house/house_index.css" />
<link rel="stylesheet" type="text/css"
	href="js/webuploader-0.1.5/webuploader.css" />

<script src="js/jquery-1.11.1.js"></script>
<script src="js/bootstrap2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/layui-v2.1.5/layui/layui.all.js"></script>
<script type="text/javascript"
	src="<%=basePath%>js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="js/webuploader-0.1.5/webuploader.js"></script>
<script type="text/javascript" src="js/sharefunction.js"></script>
<script src="js/select2/select2.min.js"></script>
<script type="text/javascript" src="js/form.js"></script>
<!-- 图片放大 -->
<script src="js/postbird-img-glass/postbird-img-glass.js"></script>
<script>
	$(function(){
		//初始化S2
		initRoadWorkS2();
		//修改字段标记记录变量
		<c:set var="marks" value="原数据"/>
		
	});
	
	function sava(opt){
		var url = "customer/dm/disposeRoadWorkPerson";
		var apId = '${requestScope.apId }';
		var exDataId = '${exDataId}';
		var approvalRemark = $("textarea[name='approvalRemark']").val();
		var formData = {
				exDataId:exDataId,
	        	opt:opt,
	        	apId:apId,
	        	approvalRemark:approvalRemark
	    };
		disposeSave(opt,url,formData);
	}
</script>
<body>
	<!-- 施工人员 -->
	<div>
		<!-- 表单开始 -->
		<form id="roadWorkPersonForm" method="post">
			<input type="hidden" id="roadwork_articleId">
			<div class="panel panel-default">
				<div class="panel-body ">
					<!-- 管理人员 -->
					<div style="margin:0px 0px 20px 0px;">
						<p style="height:35px;border-bottom:1px solid gray">
							<span class="style_btn">管理人员</span>
						</p>
						<table cellpadding="10" cellspacing="5" class="mytable"
							style="margin-left:5px;">
							<tr>
								<td width="90"><span class="style_btn">施工单位</span></td>
								<td><select id="roadworks2" style="width: 200px;">
								</select></td>
							</tr>
							<tr>
								<td width="90"><span class="style_btn">姓名</span></td>
								<td><input name="staffName" /></td>
							</tr>
							<tr>
								<td><span class="style_btn">授权委托</span></td>
								<td><input name="authorize" /></td>
							</tr>
							<!-- 授权委托附件 -->
							<tr>
								<td></td>
								<td>
									<!-- 缩略图容器 -->
									<div id='list_shouquan'></div> <!-- 上传按钮 -->
									<div id='filePicker_weituo' style="display: none">上传</div>
								</td>
							</tr>
							<tr>
								<td><span class="style_btn">身份证件</span></td>
								<td>
									<!-- 缩略图容器 -->
									<div id='list_idcard'></div> <!-- 上传按钮 -->
									<div id='filePicker_idcard' style="display: none">上传</div>
								</td>
							</tr>
							<tr>
								<td><span class="style_btn">照片</span></td>
								<td>
									<!-- 缩略图容器 -->
									<div id='list_zhaopian'></div> <!-- 上传按钮 -->
									<div id='filePicker_zhaopian' style="display: none">上传</div>
								</td>
							</tr>
							<tr>
								<td><span class="style_btn">出入证打印</span></td>
								<td>
									<!-- 缩略图容器 -->
									<div id='list_churudayin'></div> <!-- 上传按钮 -->
									<div id='filePicker_churudayin' style="display: none">上传</div>
								</td>
							</tr>
						</table>
					</div>
					<!-- 专业工种 -->
					<div>
						<p style="height:35px;border-bottom:1px solid gray">
							<span class="style_btn">专业工种</span>&nbsp;&nbsp;&nbsp;&nbsp; <a
								name="zygzAdd" class="btn btn-danger radius a_font"
								onclick="addRwp()"> 添加</a>
						</p>
						<!-- 存放专业工种表单 -->
						<div id="major_job"></div>
					</div>
			
				</div>
			</div>
			<div style="width:100%;">
				<input type="hidden" id="entityId_id" name="roadworkId" value="${requestScope.id }"/>
				<input type="hidden" id="apId" name="apId" value="${requestScope.apId }"/>
				<c:if test="${requestScope.notPassExamine}">
					<!-- 修改时添加变更说明 -->
					<div style="margin:10px;" id="approvalRemark">
						审批意见<textarea rows="3" name="approvalRemark"style="width:70%"></textarea><span style="color:red;">*</span>
					</div>
					<div style="width:100%;text-align:center; padding-top:0px">
						<button class="btn btn-danger radius my-btn"
							onclick="sava(0)" type="button">同意</button>
						<button class="btn btn-default radius"
							onclick="sava(1)" type="button">拒绝</button>
					</div>
				</c:if>
			</div>
			<input hidden="hidden" value="${id }" id="entityId_personId" name="personId">
			<input hidden="hidden" value="${dw.fkroomId }" id="roomId" name="roomId">
			<input hidden="hidden" value="${dw.fkcustomerId }" id="fkcustomerId" name="fkcustomerId">
		</form>
		
		<!-- 表单结束 -->
		<script type="text/javascript">
		
			//初始化s2标签，同时将核准材料页面上的s2也初始化了
			function initRoadWorkS2() {
				var $s2 = $("#roadworks2");
				//施工人员
				$s2.select2();
				var fkcustomerId = $("#fkcustomerId").val();
				var roomId = $("#roomId").val();
				$.getJSON("customer/dm/getAllDecorateUnit", {
					fkcustomerId : fkcustomerId,
					roomId : roomId
				}, function(data, status) {
					//防止重复加载
					$s2.find("*").remove();
					//设置默认值,主要用来后面做验证
					$s2.append("<option value=\"\">请选择施工单位</option>");
					$s2.val("").trigger("change");
					//动态加载数据
					$.each(data, function(i, v) {
						$s2.append("<option value=" + v.id + ">" + v.unitName + "</option>");
					});
					//调用本jsp页面 initRoadWorkPersonEditData 方法初始化表单数据
					initRoadWorkPersonEditData($s2);
					//禁用表单按钮
					hideButton();
					//悬浮提示
					toolTip();
				});
				//s2 change事件,修改装修方案全局id变量
				$s2.change(function() {
					rpfkdunitId = $s2.val();
				});
			}
			function getTip(data){
				var html = "<span class=\"toolTip mark-msg\"data-tip=\""+data+"\">原数据</span>"
				return html;
			}
			var defautHtml = "<span class=\"toolTip mark-msg\"data-tip=\"空\">原数据</span>";
			//初始化表单数据,针对编辑状态
			function initRoadWorkPersonEditData($s2) {
				var personId = $("#roadWorkPersonForm").find("input[name='personId']").val();
				var data = ${dws};
				if (data) {
					//修改s2默认值
					$s2.val(data.fkdunitId).trigger("change");
					var map = ${map};
					//管理人员数据
					$("#roadWorkPersonForm input[name='authorize']").val(data.authorize);
					$("#roadWorkPersonForm input[name='staffName']").val(data.staffName);
					//修改字段提示   
					if(map.authorize != undefined && map.authorize != ''){
						$("#roadWorkPersonForm input[name='authorize']").parent().append(getTip(map.authorize));
					}else if(map.authorize == ''){
						$("#roadWorkPersonForm input[name='authorize']").parent().append(defautHtml);
					}
					if(map.staffName != undefined && map.staffName != ''){
						$("#roadWorkPersonForm input[name='staffName']").parent().append(getTip(map.staffName));
					}else if(map.staffName == ''){
						$("#roadWorkPersonForm input[name='staffName']").parent().append(defautHtml);
					}
					getFiles(data.id,data.accessoryCaList);
					//专业工种数据
					$.each(data.proDw, function(i, v) {
						addRwp(v.id, v.workType, v.staffName,map[v.id]);
						//获取附件数据
						var i = roadworkTpId - 1;
						getProFiles(v.id,v.accessoryCaList,i);
					});
				} 
			}
			
			//获取附件
			function getFiles(id,fileCas){
				fileCas=$.parseJSON(fileCas);
				//原附件数据
				getFileListByFlag(id, "管理人员授权委托",2,"#list_shouquan", setrpRFL, imgPlus);
				getFileListByFlag(id, "管理人员身份证",2, "#list_idcard", setrpRFL, imgPlus);
				getFileListByFlag(id, "管理人员照片",2, "#list_zhaopian", setrpRFL, imgPlus);
				getFileListByFlag(id, "管理人员出入打印",2, "#list_churudayin", setrpRFL, imgPlus);
				console.log(fileCas.length);
				<c:if test="${requestScope.notPassExamine}"> 
				//编辑新加的图片数据
				if(fileCas.length > 0){
					var shouquan = "";//管理人员授权委托
					var idcard = "";//管理人员身份证
					var zhaopian = "";//管理人员照片
					var churudayin = "";//管理人员出入打印
					for(var i=0;i<fileCas.length;i++){
						if(fileCas[i].articleId == "管理人员授权委托"){
							shouquan += (","+fileCas[i].accessoryCAId);
						}else if(fileCas[i].articleId == "管理人员身份证"){
							idcard += (","+ fileCas[i].accessoryCAId);
						}else if(fileCas[i].articleId == "管理人员照片"){
							zhaopian += (","+ fileCas[i].accessoryCAId);
						}else if(fileCas[i].articleId == "管理人员出入打印"){
							churudayin += (","+ fileCas[i].accessoryCAId);
						}
					}
					if(shouquan != ""){
						getFileTempList(shouquan.substring(1),"#list_shouquan", setrpRFL, imgPlus);
					}
					if(idcard != ""){
						getFileTempList(idcard.substring(1), "#list_idcard", setrpRFL, imgPlus);
					}
					if(zhaopian != ""){
						getFileTempList(zhaopian.substring(1),"#list_zhaopian", setrpRFL, imgPlus);
					}
					if(churudayin != ""){
						getFileTempList(churudayin.substring(1),"#list_churudayin", setrpRFL, imgPlus);
					}
				}
				</c:if>
			}
			
			//获取专业工种附件
			function getProFiles(id,fileCas,i){
				fileCas=$.parseJSON(fileCas);
				//原附件数据
				getFileListByFlag(id, "专业工种身份证",2, "#list_idCard_tp" + i, setrpRFL, imgPlus);
				getFileListByFlag(id, "专业工种照片",2, "#list_zhaopian_tp" + i, setrpRFL, imgPlus);
				getFileListByFlag(id, "专业工种出入打印",2, "#list_churudayin_tp" + i, setrpRFL, imgPlus);
				getFileListByFlag(id, "专业工种作业证书",2, "#list_workca_tp" + i, setrpRFL, imgPlus);
				<c:if test="${requestScope.notPassExamine}"> 
				//编辑新加的图片数据
				if(fileCas.length > 0){
					var idCard_tp = "";//专业工种身份证
					var zhaopian_tp = "";//专业工种照片
					var churudayin_tp = "";//专业工种出入打印
					var workca_tp = "";//专业工种作业证书
					for(var j=0;j<fileCas.length;j++){
						if(fileCas[j].articleId == "专业工种身份证"){
							idCard_tp += (","+fileCas[j].accessoryCAId);
						}else if(fileCas[j].articleId == "专业工种照片"){
							zhaopian_tp += (","+ fileCas[j].accessoryCAId);
						}else if(fileCas[j].articleId == "专业工种出入打印"){
							churudayin_tp += (","+ fileCas[j].accessoryCAId);
						}else if(fileCas[j].articleId == "专业工种作业证书"){
							workca_tp += (","+ fileCas[j].accessoryCAId);
						}
					}
					if(idCard_tp != ""){
						getFileTempList(idCard_tp.substring(1),"#list_idCard_tp"+i, setrpRFL, imgPlus);
					}
					if(zhaopian_tp != ""){
						getFileTempList(zhaopian_tp.substring(1), "#list_zhaopian_tp" + i, setrpRFL, imgPlus);
					}
					if(churudayin_tp != ""){
						getFileTempList(churudayin_tp.substring(1),"#list_churudayin_tp" + i, setrpRFL, imgPlus);
					}
					if(workca_tp != ""){
						getFileTempList(workca_tp.substring(1),"#list_workca_tp" + i, setrpRFL, imgPlus);
					}
				}
				</c:if>
			}
			//设置待删除附件的值到集合中
			function setrpRFL(id, _this) {
				layer.confirm('删除该图片？', {
					title : '警告',
					icon : 0,
					shade : [ 0.1, '#fff' ]
				}, function() {
					rpFjList.push(id);
					//删除指定缩略图
					$("#" + id).remove();
					layer.close(layer.index);
				});
			}
			//禁用表单按钮
			function hideButton(){
				//锁定表单
				$("#roadWorkPersonForm input").attr("readonly", true);
				$("#roadWorkPersonForm select,a[name='zygzAdd']").attr("disabled", true);

				$("#roadWorkPersonForm").find(".icon-fullscreen").hide();
				//禁止点击上传按钮
				$("#roadWorkPersonForm div[id^='filePicker']").hide();
			}
			
			//本页面图片放大通用方法,同时隐藏上传按钮与图片删除按钮
			function imgPlus(data) {
				$("#roadWorkPersonForm span.uploadcancel").hide();
				$.each(data, function(i, v) {
					PostbirdImgGlass.init({
						domSelector : "#" + v.id + " img",
						animation : true,
						//height:'80%',
						myDocument : window.parent.parent.parent
					});
				});
			}
		
			//该页面唯一id 用来区别多个专业工作附件id
			var roadworkTpId = 0;
			//添加专业工种模版到页面中
			function addRwp(id, workType, staffName,map) {
				var node;
				node = createTemplate(id, workType, staffName,map);
				var oTest = $("#major_job");
				oTest.append(node);
			}
		
			//创建模版
			function createTemplate(id, workType, staffName,map) {
				var html = $("#rwp div:eq(0)").clone();
				html.find("#roadwork_articleIdtp").attr("id", "roadwork_articleId" + roadworkTpId);
				//修改缩略图id
				html.find("#list_idCard_tp").attr("id", "list_idCard_tp" + roadworkTpId);
				html.find("#list_zhaopian_tp").attr("id", "list_zhaopian_tp" + roadworkTpId);
				html.find("#list_churudayin_tp").attr("id", "list_churudayin_tp" + roadworkTpId);
				html.find("#list_workca_tp").attr("id", "list_workca_tp" + roadworkTpId);
				//修改上传按钮id
				html.find("#filePicker_idCard_tp").attr("id", "filePicker_idCard_tp" + roadworkTpId);
				html.find("#filePicker_zhaopian_tp").attr("id", "filePicker_zhaopian_tp" + roadworkTpId);
				html.find("#filePicker_churudayin_tp").attr("id", "filePicker_churudayin_tp" + roadworkTpId);
				html.find("#filePicker_workca_tp").attr("id", "filePicker_workca_tp" + roadworkTpId);
				//****************如果有参数则将数据带入模版中***************************
				//设置工种
				html.find("input[name='workType']").val(workType);
				
				//设置人员姓名
				html.find("input[name='staffname1']").val(staffName);
				
				//设置专业工种id
				html.find("input[name='rwpId']").val(id);
				if(map != undefined){
					if(map.workType != undefined && map.workType != ''){
						html.find("input[name='workType']").parent().append(getTip(map.workType));
					}else if(map.workType == ''){
						html.find("input[name='workType']").parent().append(defautHtml);
					}
					if(map.staffName != undefined && map.staffName != ''){
						html.find("input[name='staffname1']").parent().append(getTip(map.staffName));
					}else if(map.staffName == ''){
						html.find("input[name='staffname1']").parent().append(defautHtml);
					}
					if(map.rwpId != undefined && map.rwpId != ''){
						html.find("input[name='rwpId']").parent().append(getTip(map.rwpId));
					}else if(map.rwpId == ''){
						html.find("input[name='rwpId']").parent().append(defautHtml);
					}
				}
				
				roadworkTpId++;
				return html;
			}
		</script>
	</div>

	<!-- 模板div -->
	<div id="rwp" style="display:none;">
		<div class="style_border_tem">
			<table cellpadding="10" cellspacing="5" class="mytable"
				style="margin-left:5px;">
				<input type="hidden" id="roadwork_articleIdtp" name="rwarticleId">
				<input type="hidden" name="rwpId" value="" id="entityId_rwpId">
				<tr>
					<td width="90"><span class="style_btn">工种</span></td>
					<td><input name="workType" /></td>
					<td width="90"><span class="style_btn">姓名</span></td>
					<td><input name="staffname1" /></td>
					<td valign="top" align="right"><a href="javascript:void(0)"
						onclick="delTrRwp(this)"> <i class="icon-fullscreen"></i>
					</a></td>
				</tr>
				<tr>
					<td><span class="style_btn">身份证件</span></td>
					<td>
						<!-- 缩略图容器 -->
						<div id='list_idCard_tp'></div> <!-- 上传按钮 -->
						<div id='filePicker_idCard_tp' style="display: none">上传</div>
					</td>
				</tr>
				<tr>
					<td><span class="style_btn">照片</span></td>
					<td>
						<!-- 缩略图容器 -->
						<div id='list_zhaopian_tp'></div> <!-- 上传按钮 -->
						<div id='filePicker_zhaopian_tp' style="display: none">上传</div>
					</td>
				</tr>
				<tr>
					<td><span class="style_btn">出入证打印</span></td>
					<td>
						<!-- 缩略图容器 -->
						<div id='list_churudayin_tp'></div> <!-- 上传按钮 -->
						<div id='filePicker_churudayin_tp' style="display: none">上传</div>
					</td>
				</tr>
				<tr>
					<td><span class="style_btn">作业证书</span></td>
					<td>
						<!-- 缩略图容器 -->
						<div id='list_workca_tp'></div> <!-- 上传按钮 -->
						<div id='filePicker_workca_tp' style="display: none">上传</div>
					</td>
				</tr>
			</table>
		</div>
	</div>
</body>
</html>